<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
        }



/* 进度条 */
input[type=range]::-webkit-slider-runnable-track {/*轨道*/
background:red;
border-radius: 10px;
}
/* 滑块 */
input[type=range]::-webkit-slider-thumb {/*滑块*/
-webkit-appearance: none;
height: 8px;
width: 8px;
margin-top: -1px; 
background: pink !important; 
border-radius: 50%; 
}
input[type=range] {/*input外壳样式*/
    -webkit-appearance: none;
}
    </style>
</head>

<body>
    <!-- jQuery中attr用于获取/设置自定义属性；prop用于获取/设置DOM固有属性； -->
    <input type="email" name="" id="">
    <input type="week" name="" id="">
    <input type="url" name="" id="">
    <input type="month" name="" id="">
    <input type="number" name="" id="">
    <input type="password" name="" id="">
    <input type="search" name="" id="">
    <input type="tel" name="" id="">
    <input type="reset" name="" id="">
    <input type="hidden" name="" id="">33
    <input type="datetime-local" name="" id="">
    <input type="datetime" name="" id="">


<div class="box">
    <input min="1"max="100"value="0" onchange="fn(event)" type="range" name="" id="range">
</div>

<input min="1"max="100"value="0" onchange="fn(event)" type="range" name="" id="range">

    <script>
        var range = document.querySelector('#range')
        setInterval(()=>{
            let num=range.value
            num++
            range.value=num
        },1000)
        function fn(e) {
            console.log(range.value);
        }
           

    </script>
</body>

</html>